/*
 * @Author: hcluo
 * @Date: 2020-04-22 14:48:03
 * @LastEditors: hcluo
 * @LastEditTime: 2020-06-12 21:23:58
 * @Description: 政府项目
 */
import React, { useEffect, Suspense, lazy } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

// import PropTypes from 'prop-types';
import { useFetchData } from '../data/redux/hooks';
// import Item from '../modules/item';
// const Item = React.lazy(() => import(`../modules/item`));

// const Item = props => {
//     const { code, pageId } = props;
//     const { module, request, status } = useFetchData(code, pageId);
//     return (
//         <>
//             {JSON.stringify(status)}
//             <div>module: {JSON.stringify(module)}</div>
//             ------------------------------------
//             <div>request: {JSON.stringify(request)}</div>
//         </>
//     );
// };

const itemRender = (child, k, pageId) => {
    let m = [];
    for (const [k, v] of Object.entries(child)) {
        let { type, children } = v;

        const Item = React.lazy(() => import(`../modules/${'item'}`));
        m.push(
            <div key={k} className="item" style={v.style}>
                {/* {k} - {type} -
                <Item code={k} pageId={pageId} /> */}
                <Suspense fallback={<div>loading...</div>}>
                    <Item code={k} pageId={pageId} />
                </Suspense>
            </div>,
        );
    }
    return m;
};

const modulesRender = (modules, pageId) => {
    let m = [];
    for (const [k, v] of Object.entries(modules)) {
        let { type, children } = v;
        m.push(
            <div key={k} className="item" style={v.style}>
                <div className="modulesGrid">{children && itemRender(children, k, pageId)}</div>
            </div>,
        );
    }
    return m;
};

export default function Page({ pageId }) {
    const { style, modules } = useSelector(state => state.layout.pages[pageId], shallowEqual);
    return (
        <div className="general-page" style={style}>
            {modulesRender(modules, pageId)}
        </div>
    );
}

Page.propTypes = {};
Page.defaultProps = {};
